{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" href="{{_res_path}}state/state.css">
{{/block}}
{{block 'main'}}
{{each BotStatusList}}
<div class="box" data-boxInfo="Bot{{isBotIndex ? $index + 1 : ''}}信息">
    <div class="tb">
        <div class="avatar">
            <img src="{{$value.avatar}}" onerror="this.src= '{{$value.defaultAvatar}}'; this.onerror = null;">
        </div>
        <div class="header">
            <h1>{{$value.nickname}}</h1>
            <hr noshade>
            <p> Bot 已运行 {{$value.botRunTime}}</p>
            <!-- <p>收 <span>{{$value.recv || 0}}</span> | 发 <span>{{$value.sent || 0}}</span> | 图片 <span>{{$value.screenshot
                    || 0}}</span></p>
            <p>好友 <span>{{$value.friendQuantity}}</span> | 群 <span>{{$value.groupQuantity}}</span> | 群员
                <span>{{$value.groupMemberQuantity}}</span>
            </p> -->
            <table>
                <tr>
                    <td>收</td>
                    <td class="dyeing">{{$value.recv || 0}}</td>
                    <td>发</td>
                    <td class="dyeing">{{$value.sent || 0}}</td>
                    <td>图片</td>
                    <td class="dyeing">{{$value.screenshot || 0}}</td>
                </tr>
                <tr>
                    <td>好友</td>
                    <td class="dyeing">{{$value.friendQuantity}}</td>
                    <td>群</td>
                    <td class="dyeing">{{$value.groupQuantity}}</td>
                    <td>群员</td>
                    <td class="dyeing">{{$value.groupMemberQuantity}}</td>
                </tr>
            </table>
            <p>{{$value.onlineStatus}}({{$value.platform}}) | {{$value.botVersion}}</p>
        </div>
    </div>
</div>
{{/each}}
<div class="box" data-boxInfo="主硬件">
    <ul class="mainHardware">
        {{each visualData group}}
        <li class="li">
            <!-- <div class="circle"> -->
            <!-- <div class="left">
                    <div class="left-circle" {{@group.leftCircle}}>
                    </div>
                </div>
                <div class="right">
                    <div class="right-circle" {{@group.rightCircle}}>
                    </div>
                </div>
                <div class="inner">
                    {{group.inner}}
                </div> -->
            <div class="container-box" data-num="{{group.inner}}" id="box">
                <div class="circle-outer"></div>
                <!-- 添加svg -->
                <svg>
                    <!-- <defs>
                            <radialGradient id="gradient" cx="50%" cy="50%" r="60%" fx="50%" fy="50%">
                                <stop offset="30%" stop-color="var(--ring-color2)" />
                                <stop offset="100%" stop-color="var(--ring-color1)" />
                            </radialGradient>
                        </defs> -->
                    <circle id="circle" stroke="{{group.color}}" style="stroke-dashoffset:{{group.per}}"></circle>
                </svg>
            </div>
            <!-- </div> -->
            <article>
                <summary>{{group.title}}</summary>
                {{each group.info info}}
                <p>{{info}}</p>
                {{/each}}
            </article>
        </li>
        {{/each}}
    </ul>
</div>

{{if HardDisk}}
<div class="box memory" data-boxInfo="磁盘">
    <ul>
        {{each HardDisk}}
        <li class="HardDisk_li">
            <div class="word mount">{{$value.mount}}</div>
            <div class="progress">
                <div class="word">{{$value.used}} / {{$value.size}}</div>
                <div class="current" style="width:{{$value.use}}%;background:{{$value.color}}"></div>
            </div>
            <div class="percentage">{{$value.use}}%</div>
        </li>
        {{/each}}
    </ul>
    {{if fsStats}}
    <div class="speed">
        <p>fsStats</p>
        <p>读 {{fsStats.rx_sec}}/s | 写 {{fsStats.wx_sec}}/s</p>
    </div>
    {{/if}}
</div>
{{/if}}

{{if chartData}}
<div class="box" data-boxInfo="图表">
    <div id="Chart" style="height: 300px;"></div>
    <script src="{{_res_path}}state/echarts.min.js"></script>
    <script>
        let chartData = JSON.parse('{{@chartData}}')
        echarts.registerTheme('westeros', chartData.echarts_theme)
        const chart = echarts.init(document.getElementById('Chart'), 'westeros', {
            renderer: 'svg'
        })
        const backdrop = chartData.backdrop
        // 背景api
        if (backdrop) {
            var container = document.getElementById('container')
            container.style.backgroundImage = 'url(' + backdrop + ')'
        }
        const by = (value) => {
            value = value?.value ?? value
            let units = ['B', 'KB', 'MB', 'GB', 'TB'] // 定义单位数组
            let unitIndex = 0
            while (value >= 1024 && unitIndex < units.length - 1) {
                value /= 1024
                unitIndex++
            }
            return value.toFixed(0) + units[unitIndex] // 返回带有动态单位标签的字符串
        }
        let option = {
            animation: false,
            textStyle: {
                fontFamily: `FZB, Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC"`
            },
            title: {
                text: 'Chart'
            },
            legend: {},
            grid: {
                left: '1%',
                right: '1.5%',
                bottom: '0',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'time'
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: by
                    }
                }
            ],
            series: [
                {
                    name: '上行',
                    type: 'line',
                    // areaStyle: {},
                    showSymbol: false,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.network.upload
                },
                {
                    name: '下行',
                    type: 'line',
                    // areaStyle: {},
                    showSymbol: false,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.network.download
                },
                {
                    name: '读',
                    type: 'line',
                    // areaStyle: {},
                    showSymbol: false,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.fsStats.readSpeed
                },
                {
                    name: '写',
                    type: 'line',
                    // areaStyle: {},
                    showSymbol: false,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.fsStats.writeSpeed
                }
            ]
        }
        option.legend.data = option.series
            .filter(item => item.data.length !== 0)
            .map(item => item.name);
        chart.setOption(option)
    </script>
</div>

{{/if}}
{{if otherInfo}}
<div class="box" data-boxInfo="其他">
    {{each otherInfo}}
    <div class="speed">
        <p>{{$value.first}}</p>
        <p>{{@$value.tail}}</p>
    </div>
    {{/each}}
</div>
{{/if}}

{{if psTest}}
<div class="box" data-boxInfo="网络测试">
    {{each psTest}}
    <div class="speed">
        <p>{{$value.first}}</p>
        <p>{{@$value.tail}}</p>
    </div>
    {{/each}}
</div>
{{/if}}

{{@FastFetch}}

{{/block}}